<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">

                    <el-form-item label="公司名称">
                        <el-input v-model="formInline.name" style="width:140px"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-search" size="mini" round @click="clickSearch()" type="primary">搜索
                        </el-button>

                        <el-button icon="el-icon-plus" size="mini" round @click="handleAdd()" type="primary">增加
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>

        <div>
            <el-card>
                <el-table
                        :data="tableData.data"
                        :stripe="true"
                        :border="true"
                        tooltip-effect="dark">
                    <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                    <el-table-column prop="CompanyCode" label="公司编号" align="center">
                    </el-table-column>
                    <el-table-column prop="CompanyName" label="公司名称" align="center">
                    </el-table-column>

                    <el-table-column label="公司Logo" align="center">
                        <img v-bind:src="CompanyLogo">
                    </el-table-column>
                    <el-table-column prop="CompanyAddress" label="公司地址" align="center">
                    </el-table-column>

                    <el-table-column label="操作" width="400px" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-edit" align="center">编辑
                            </el-button>
                            <el-button @click="clickDelete(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-edit" align="center">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"

                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>
        <!-- 编辑弹出处理页面-->
        <el-dialog
                title="公司编辑"
                :visible.sync="editFormVisible"
                width="50%"
                :before-close="handleClose">
            <el-card>

                <el-row>
                    <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData">
                        <el-form-item label="公司名称" prop="CompanyName">
                            <el-input v-model="detailData.CompanyName" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="公司编号" prop="CompanyCode">
                            <el-input v-model="detailData.CompanyCode" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="公司Logo" prop="CompanyLogo">
                            <el-input v-model="detailData.CompanyLogo" auto-complete="off" disabled>
                                    <el-button slot="append" v-on:click="chooseLogo()">选择</el-button>
                            </el-input>
                            <input id="inputFile" type="file" accept="image/jpg,image/jpeg,image/png" class="sr-only" v-on:change="changeLogo()" />
                        </el-form-item>
                    </el-form>
                    <el-form :label-position="'left'" label-width="70px">
                        <el-form-item label="公司地址">
                            <el-input v-model="detailData.CompanyAddress" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>

                </el-row>
            </el-card>

            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="clickSave()"
                               style="text-align: center">确定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>
<script>

    import {getCompanyTable,saveCompany,deleteCompany} from "../../api/data/getCompany";

    export default {
        mounted() {
            let _this = this;
            this.handleCompanyTable({}, 1);
            //this.handleWarningDetail();
            //this.handleDetailMessage();
            // modType().then(d => {
            //     _this.modType = d.data;
            // });
            // LogType().then(d => {
            //     _this.LogType = d.data;
            // });
            // ProcessFlag().then(d => {
            //     _this.ProcessFlag = d.data;
            // });


        },
        data() {
            return {
                dialogVisible: false,
                currentPage: 1,
                formInline: {
                    id: '',
                    name: '',

                },
                detailData: {
                    Id: '',
                    CompanyName: '',
                    CompanyCode: '',
                    CompanyLogo: '',
                    CompanyAddress:''
                },
                tableData: [],
                editFormVisible: false,


                // multipleSelection: []
            }
        },
        methods: {
            handleCompanyTable(data = {}, pageno) {
                if(this.formInline.name!=''){
                    data.CompanyName=this.formInline.name;
                }
                getCompanyTable(pageno,10,data).then(res => {
                    this.tableData = res;
                })

            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleCompanyTable({},val);
            },

            
            clickSave() {
                let files = document.getElementById("inputFile").files;
                let file = files.length>0?files[0]:null;
                saveCompany( this.detailData.CompanyCode,
                            this.detailData.CompanyName,
                            this.detailData.CompanyAddress,
                            file).then(res => {
                    if (res.state === 0) {
                        this.$message({
                            message: '提交成功！',
                            type: 'success'
                        });

                        this.editFormVisible = false;
                        //更新列表
                        this.handleCompanyTable({}, this.currentPage);

                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });

                    }
                });
            },
            
            clickDelete(index,data){
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    
                    deleteCompany(data.Id).then(res=>{
                        if (res.state === 0) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            //更新列表
                            this.tableData.data.splice(index,1);

                        } else {
                            this.$message({
                                message: '删除失败！',
                                type: 'error'
                            });

                        }
                    });
                });
            },

            clickSearch(){
                this.handleCompanyTable({},1);
            },

            handleEdit(index, data) {
                this.editFormVisible=true;
                this.detailData = data;
            },

            handleAdd(){
                this.detailData={
                    CompanyAddress:'',
                    CompanyCode:'',
                    CompanyLogo:'',
                    CompanyName:''
                };
                this.editFormVisible=true;
            },

            changeLogo:function(){
                var selectedFile = document.getElementById("inputFile").files[0];
                this.detailData.CompanyLogo = selectedFile.name + "[" + selectedFile.size + "B]";
            },
            chooseLogo:function(){
                document.getElementById('inputFile').click();
            }

        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        /*margin-left: 5px;*/
    }

    .number1 {
        padding-left: 0px;
    }


</style>

